<template>
  <div class='home_container'>
    <van-nav-bar fixed z-index="999">
      <template v-slot:left>
        <img src="@/assets/toutiao_logo.png" alt="">
      </template>
      <template v-slot:right>
        <van-icon name="search" size="0.48rem" @click="intoSearchFn" />
      </template>
    </van-nav-bar>
    <van-tabs v-model="channelId" sticky offset-top="1.22rem" animated @change="changeTabFn">
      <van-tab v-for="item in userChannelList" :title="item.name" :key="item.id" :name="item.id">
        <ArticleList :channelId="channelId"></ArticleList>
      </van-tab>
    </van-tabs>
    <van-icon name="plus" size="0.373333rem" class="moreChannels" @click="showPopup" />
    <!-- 频道管理弹出层 -->
    <van-popup v-model="show">
      <ChannelEdit @closePopup="closePopupFn" :userChannelList="userChannelList"
        :unCheckChannelList="unCheckChannelList" @addChannelEV="addChannelFn" @delChannelEV="delChannelFn"
        v-model="channelId">
      </ChannelEdit>
    </van-popup>
  </div>
</template>

<script>
import { getUserChannelsAPI, getAllChannelsAPI, updateChannelAPI } from '@/api'
import { Notify } from 'vant'
import ArticleList from './components/ArticleList'
import ChannelEdit from './ChannelEdit'

export default {
  name: 'MyHome',
  data () {
    return {
      channelId: 0,
      userChannelList: [],
      allChannelList: [],
      show: false,
      channelScrollTObj: {} // 保存每个频道的滚动位置
    }
  },
  components: {
    ArticleList,
    ChannelEdit
  },
  methods: {
    // 1.获取用户选择频道
    async getUserChannels () {
      const { data: res } = await getUserChannelsAPI()
      if (res.message === 'OK') {
        this.userChannelList = res.data.channels
      } else {
        Notify({ type: 'danger', message: '获取频道失败' })
      }
    },

    // 2.弹出频道管理弹出层
    showPopup () {
      this.show = true
    },

    // 3.关闭频道管理弹出层
    closePopupFn () {
      this.show = false
    },

    // 4.获取用户选择频道
    async getAllChannels () {
      const { data: res } = await getAllChannelsAPI()
      if (res.message === 'OK') {
        this.allChannelList = res.data.channels
      } else {
        Notify({ type: 'danger', message: '获取频道失败' })
      }
    },

    // 5.子向父传值-更新
    async addChannelFn (obj) {
      this.userChannelList.push(obj)
      this.updateChannel()
    },

    // 6.子向父传值-删除
    delChannelFn (obj) {
      const index = this.userChannelList.findIndex(item => item.id === obj.id)
      if (index === 0) {
        return
      }
      this.userChannelList.splice(index, 1)
      this.updateChannel()
    },

    // 7.更新频道方法封装
    async updateChannel () {
      const newArr = this.userChannelList.filter(obj => obj.id !== 0)
      const theNewArr = newArr.map((obj, index) => {
        const newObj = { ...obj }
        delete newObj.name
        newObj.seq = index
        return newObj
      })
      // 最新数据发送给后台
      const { data: res } = await updateChannelAPI({ channels: theNewArr })
      Notify({ type: 'success', message: res.message })
    },

    // 8.进入搜索页面
    intoSearchFn () {
      this.$router.push('/search')
    },

    // 9.tab栏切换
    changeTabFn () {
      // 取高度,但是tab切走时高度为0
      this.$nextTick(() => {
        document.documentElement.scrollTop = this.channelScrollTObj[this.channelId]
      })
    },

    scrollFn () {
      // 存高度
      this.$route.meta.scrollT = document.documentElement.scrollTop
      this.channelScrollTObj[this.channelId] = document.documentElement.scrollTop
      console.log(this.channelScrollTObj[this.channelId])
    }
  },
  computed: {
    unCheckChannelList () {
      // 筛选出未被用户选择的频道
      return this.allChannelList.filter(item1 => {
        return this.userChannelList.findIndex(item2 => item1.name === item2.name) < 0
      })
    }
  },
  created () {
    this.getUserChannels()
    this.getAllChannels()
  },
  mounted () { },

  activated () {
    window.addEventListener('scroll', this.scrollFn)
    document.documentElement.scrollTop = this.$route.meta.scrollT
  },

  deactivated () {
    window.removeEventListener('scroll', this.scrollFn)
  }
}
</script>

<style lang='less' scoped>
.home_container {
  padding-top: 46px;
}

img {
  width: 100%;
  height: 30px;
}

.van-icon {
  color: #fff;
  font-size: 18px;
}

/deep/ .van-tabs__line {
  background-color: #007bff;
}

/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

.moreChannels {
  position: fixed;
  top: 60px;
  right: 8px;
  color: #313131;
  z-index: 999;
}

.van-popup {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}
</style>
